<style>
    span.test {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 10px;
    }

    .color-box label input {
        display: none;
    }

    #id_color li {
        display: inline-block;
        left: -40px;
        position: relative;
        margin: 5px;
    }

    span.test:hover {
        cursor: pointer;
        border: 2px solid black;
    }
</style>


<div class="color-box">
    {% if wrap_label %}<label{% if widget.attrs.id %} for="{{ widget.attrs.id }}"{% endif %}>{% endif %}
    <input type="{{ widget.type }}" name="{{ widget.name }}" {% if widget.value != None %}
           value="{{ widget.value|stringformat:'s' }}" {% endif %}

    {% for name, value in widget.attrs.items %}{% if value is not False %}
        {{ name }}{% if value is not True %}="{{ value|stringformat:'s' }}"{% endif %}{% endif %}{% endfor %} />

    <span class="test" style="background-color:{% if wrap_label %} {{ widget.label }} "></span> </label>{% endif %}
</div>

